<template>
   <div class="tableSlotClass">
        <div class="svgClass">
          <svg focusable="false" class="a" data-icon="info-circle" width="1em" height="1em" fill="currentColor"
          aria-hidden="true" viewBox="64 64 896 896">
          <path
            d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm32 664c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V456c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272zm-32-344a48.01 48.01 0 010-96 48.01 48.01 0 010 96z">
          </path>
        </svg>
        </div>
       <div>
         {{ tableSelectList?.length ? `已选中${tableSelectList.length}条记录${isReserve?'（可跨页）':''} |` : '未选中任何数据' }}
       </div>
       <span v-if="tableSelectList?.length >0" style="margin-left: 1%"><el-button type="primary" link  @click="empty" >清空</el-button></span>
      </div>
</template>
<script lang="ts" setup>
import { toRef,watch,onUnmounted } from 'vue'

const props = defineProps(['tableSelectList','clearSelect','isReserve'])
const tableSelectList = toRef(props,'tableSelectList')

const stopWatch = watch(tableSelectList,(newVal)=>{
  tableSelectList.value = newVal
},{immediate:true})
const empty=()=>{
    props.clearSelect()
}
onUnmounted(()=>{
  stopWatch()
})
</script>
<style scoped>
.tableSlotClass {
  margin: 5px 0px;
  width: 100%;
  height: 43px;
  border: 1px;
  border-style: solid;
  background-color: #e6f7ff;
  border-color: #91d5ff;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  font-weight: 400;
  font-family: math;
}
.a {
  color: #1890ff;
}
.svgClass{
    display: flex;
    align-items: center;
    height: 100%;
    margin-left: 1%;
    margin-right: 1%;
}
</style>
